<template>
  <div class="wrap auditContent appointmentContent">
    <div class="search">
      <el-form
        :inline="true"
        :model="formInline"
        :rules="rules"
        ref="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="单号" prop="certId">
          <el-input
            class="auditInput"
            size="small"
            v-model.trim="formInline.certId"
            placeholder="请输入单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务类别" prop="name">
          <el-input size="small" v-model.trim="formInline.name" placeholder="搜索业务类别"></el-input>
        </el-form-item>

        <el-form-item label="申请人" prop="appName">
          <el-input size="small" v-model.trim="formInline.appName" placeholder="搜索申请人"></el-input>
        </el-form-item>
        <!-- <el-form-item label="办理状态" prop="commitStatus">
          <el-select v-model="formInline.commitStatus" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>-->

        <!-- <el-form-item class="time" label="时间选择">
          <time-scope
            @receiptTime="storeTime"
            size="small"
            :vals="formInline.valNum"
            ref="timeDate"
          ></time-scope>
        </el-form-item>-->
        <el-form-item class="time" label="时间选择">
          <el-date-picker
            :clearable="false"
            v-model="valNumDate"
            type="daterange"
            style="width:250px"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <!-- icon="el-icon-search" -->
          <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
          <!-- icon="el-icon-refresh" -->
          <el-button
            size="small"
            type="info"
            style="margin-left:15px"
            @click="resetForm('formInline')"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-tabs v-model="activeName" type="border-card" @tab-click="val">
        <el-tab-pane label="待审核" name="1">
          <el-table class="table" :data="tableData" style="width: 100%">
            <el-table-column align="center" prop="certId" label="单号"></el-table-column>
            <el-table-column align="center" prop="appliType" label="申请人类型">
              <template slot-scope="scope">{{scope.row.appliType?'自然人':'企业/单位申请'}}</template>
            </el-table-column>
            <el-table-column align="center" prop="appName" label="申请人姓名"></el-table-column>
            <el-table-column align="center" prop="name" width="200" label="业务类型"></el-table-column>
            <el-table-column align="center" label="审核状态">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1" style="color: orange">待审核</p>
                <p v-if="scope.row.commitStatus == 2" style="color: cyan">已审核</p>
                <p v-if="scope.row.commitStatus == 3" style="color: red">未通过</p>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="提交时间"></el-table-column>
            <!-- <el-table-column prop="business_number" label="业务个数" width="180" align="center"></el-table-column> -->
            <el-table-column prop="operate" label="操作" align="center">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row, true)"
                  icon="el-icon-document"
                >查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="paging"> -->
          <!-- <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="total"
          ></el-pagination>-->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10,20,30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
          <!-- </div> -->
        </el-tab-pane>
        <el-tab-pane label="已审核" name="2">
          <el-table class="table" :data="tableData" style="width: 100%">
            <el-table-column align="center" prop="certId" label="单号"></el-table-column>
            <el-table-column align="center" prop="appliType" label="申请人类型">
              <template slot-scope="scope">{{scope.row.appliType?'自然人':'企业/单位申请'}}</template>
            </el-table-column>
            <el-table-column align="center" prop="appName" label="申请人名字"></el-table-column>
            <el-table-column align="center" prop="name" label="业务类型" width="300"></el-table-column>
            <el-table-column prop="phone" align="center" label="电话号码"></el-table-column>
            <el-table-column align="center" label="审核状态">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1" style="color: orange">待审核</p>
                <p v-if="scope.row.commitStatus == 2" style="color: #b3e19d">已审核</p>
                <p v-if="scope.row.commitStatus == 3" style="color: red">未通过</p>
              </template>
            </el-table-column>

            <el-table-column prop="operate" label="操作" align="center">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row, true)"
                  icon="el-icon-document"
                >查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>

          <!-- <div class="paging"> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10,20,30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
          <!-- </div> -->
        </el-tab-pane>

        <el-tab-pane label="未通过" name="3">
          <el-table class="table" :data="tableData" style="width: 100%">
            <el-table-column align="center" prop="certId" label="单号"></el-table-column>
            <el-table-column align="center" prop="appliType" label="申请人类型">
              <template slot-scope="scope">{{scope.row.appliType?'自然人':'企业/单位申请'}}</template>
            </el-table-column>
            <el-table-column align="center" prop="appName" label="申请人名字"></el-table-column>
            <el-table-column align="center" prop="name" label="业务类型" width="300"></el-table-column>
            <el-table-column prop="phone" align="center" label="电话号码"></el-table-column>
            <el-table-column align="center" label="审核状态">
              <template slot-scope="scope">
                <p v-if="scope.row.commitStatus == 1" style="color: orange">待审核</p>
                <p v-if="scope.row.commitStatus == 2" style="color: #b3e19d">已审核</p>
                <p v-if="scope.row.commitStatus == 3" style="color: red">未通过</p>
              </template>
            </el-table-column>

            <el-table-column prop="operate" label="操作" align="center">
              <template slot-scope="scope">
                <el-link type="warning" 
                @click="open(scope.$index, scope.row, true)" 
                icon="el-icon-question">
                理由
                </el-link>

                <el-link
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row, true)"
                  icon="el-icon-document"
                >查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10,20,30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import timeScope from "../../components/wDate";
export default {
  data() {
    return {
      // 日期范围
      valNumDate: [],
      path: "",
      value: "",
      id: "", // 主键
      // 页每页数据
      pageSize: 10,
      // 当前页
      pageNum: 1,
      // 总数量
      total: 0,
      corrections:"",
      // 标签nama
      activeName: "1",
      // 搜索条件
      formInline: {
        certId: "",
        name: "",
        commitStatus: 1,
        valNum: 1,
        appName: "",
        startTime: "",
        endTime: "",
      },
      //未审核列表
      tableData: [],
      //审核通过列表
      tableDatas: [],
      tableSkip: [],

      options: [
        {
          value: "1",
          label: "待审核",
        },
        {
          value: "2",
          label: "已审核",
        },
        {
          value: "3",
          label: "未通过",
        },
        // {
        //   value: "5",
        //   label: "跳过项",
        // },
      ],

      rules: {
        certId: [
          { required: false, message: "请输入活动名称", trigger: "blur" },
        ],
        name: [
          { required: false, message: "请选择活动区域", trigger: "change" },
        ],
        commitStatus: [
          { required: false, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    activeName(val, vol) {
      // console.log(val);
      this.formInline.commitStatus = val;
    },
  },
  components: {
    timeScope,
  },
  methods: {
    open(index, item, num) {
      this.$http
          .get("/trademark/proTAppChange/findByIdDetl", {
            params: {id:item.id},
          })
            .then((res) => {
              this.$alert(res.data.data.data.corrections, '未通过理由', {
                type: 'warning',
                center: true,
                dangerouslyUseHTMLString: true
              });
          });
      
      
    },
    handleEdit(index, item, num) {
      for (let i = 0; i <= 25; i++) {
        if (i == item.classId) {
          // item.classId == 23
          //   ? (this.path = "businessForm" + 24)
          //   : (this.path = "businessForm" + i);
          this.path = "businessForm" + i;
        }
      }
      let type = 0;
      if (this.activeName == 1) {
        type = 4;
      } else if (this.activeName == 2) {
        type = 11;
      }
      this.$router.push({
        path: "detail",
        query: { id: item.id, type: type, class_id: item.classId },
      });
    },
    //接收时间
    storeTime(startTime, endTime) {
      this.formInline.startTime = startTime;
      this.formInline.endTime = endTime;
    },
    skip(item) {
      let num = item.dan_number;
      this.$http.get(`/trademark/proPublic/skip/${num}`).then((result) => {
        this.request(Number(this.activeName));
      });
    },
    details(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },
    //搜索
    onSubmit(v, num = 1) {
      var _this = this;
      // return
      if (this.formInline.commitStatus) {
        num = this.formInline.commitStatus;
        console.log(num);
      }
      let datble = [];
      if (num == 1) {
        this.activeName = "1";
      } else if (num == 2) {
        this.activeName = "2";
      } else if (num == 3) {
        this.activeName = "3";
      }
      // console.log(num);
      this.$http
        .get("/trademark/proPublic/findByPublic", {
          params: {
            certId: this.formInline.certId,
            name: this.formInline.name,
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            stats: num,
            appName: this.formInline.appName,
            createDate: this.valNumDate[0],
            endDate: this.valNumDate[1],
            // createDate: (function () {
            //   if (_this.formInline.startTime) {
            //     let timer = new Date(_this.formInline.startTime);
            //     return `${timer.getFullYear()}-${
            //       timer.getMonth() + 1
            //     }-${timer.getDate()}`;
            //   } else {
            //     return "";
            //   }
            // })(), // 开始日期
            // endDate: (function () {
            //   if (_this.formInline.startTime) {
            //     let timer = new Date(_this.formInline.endTime);
            //     return `${timer.getFullYear()}-${
            //       timer.getMonth() + 1
            //     }-${timer.getDate()}`;
            //   } else {
            //     return "";
            //   }
            // })(), //结束时间
          },
        })
        .then((result) => {
          if (result.data.code != 200) return;
          let data = result.data.data.list;
          this.total = result.data.data.total;
          datble = data.map((item) => {
            let timer = new Date(item.createTime);
            item.createTime = `${timer.getFullYear()}-${
              timer.getMonth() + 1
            }-${timer.getDate()}`;
            return item;
          });
          this.tableData = datble;
        });
    },
    //重置
    resetForm(formName) {
      let newstart = this.formInline.commitStatus;
      this.$refs[formName].resetFields();
      this.valNumDate = [];
      this.formInline.commitStatus = newstart;
    },
    handleSizeChange(val) {
      //
      this.pageSize = val;
      this.request(this.activeName);
      // this.pageNum = val;
    },
    handleCurrentChange(val) {
      //
      this.pageNum = val;
      this.val();
    },
    val() {
      this.request(Number(this.activeName));
    },
    request(num = this.activeName) {
      // console.log(num);
      // var commitStatus = null;
      // if (this.activeName == 2) {
      //   if (this.formInline.commitStatus == "") {
      //     commitStatus = 0;
      //     num = null;
      //   } else {
      //     num = this.formInline.commitStatus;
      //   }
      // }
      var _this = this;
      let datble = [];
      this.$http
        .get("trademark/proPublic/findByPublic", {
          params: {
            certId: this.formInline.certId,
            name: this.formInline.name,
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            stats: num,
            commitStatus: this.commitStatus,
            appName: this.formInline.appName,
            createDate: this.valNumDate[0],
            endDate: this.valNumDate[1],
            // createDate: (function () {
            //   if (_this.formInline.startTime) {
            //     let timer = new Date(_this.formInline.startTime);
            //     return `${timer.getFullYear()}-${
            //       timer.getMonth() + 1
            //     }-${timer.getDate()}`;
            //   } else {
            //     return "";
            //   }
            // })(), // 开始日期
            // endDate: (function () {
            //   if (_this.formInline.startTime) {
            //     let timer = new Date(_this.formInline.endTime);
            //     return `${timer.getFullYear()}-${
            //       timer.getMonth() + 1
            //     }-${timer.getDate()}`;
            //   } else {
            //     return "";
            //   }
            // })(), //结束时间
          },
        })
        .then((result) => {
          // console.log(result);
          if (result.data.code != 200) return;

          this.total = result.data.data.total;
          let data = result.data.data.list;
          datble = data.map((item) => {
            let timer = new Date(item.createTime);
            item.createTime = `${timer.getFullYear()}-${
              timer.getMonth() + 1
            }-${timer.getDate()}`;
            return item;
          });
          this.tableData = datble;
        });
    },
  },
  mounted() {
    this.request();
  },
};
</script>
<style lang="less" scoped>
@max1920: ~"(max-width: 1920px)";
.wrap {
  // width: 100%;
  .table {
    //min-height: 500px;
    .tiao {
      color: #fff;
      text-decoration: none;
    }
  }
}
.el-link {
  font-size: 12px;
}

.el-form-item {
  margin: 0 30px 20px 0 !important;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 250px !important;
}
</style>

